<template>
  <view class="full-page">
    <uni-search-bar
      :focus="true"
      bg-color="var(--gray-8)"
      radius="100"
      v-model="keywords"
      @confirm="search"
      @input="search"
    	@cancel="cancel"
      @clear="clear">
    </uni-search-bar>
    
    <view v-if="!searching">
      <view class="hotel-history-items">
        <tp-history-items
          :items="historyHotelList"
          @selected="selectHistory"
          @clear="clearHistory"></tp-history-items>
      </view>
    </view>
    <view v-if="searching">
      <uni-list>
        <uni-list-item v-for="(h, idx) in hotels" 
          :title="h.label"
          :key="'h-l-' + idx"
          showArrow
          clickable
          @click="selectHotel(h)">
          <template v-slot:header>
            <view class="hotel-icon-wrapper">
              <ai-icon type="icon-hotel" :size="16" color="var(--gray-2)"></ai-icon>
            </view>
          </template>
          <template v-slot:body>
            <view class="hotel-item-wrapper">
              <view class="hotel-title">
                <text class="hotel-title-text" v-for="(t,i) in h.keyLabel" :class="{'key': t.match }" :key="'t-k-' + i">{{t.value}}</text>
              </view>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    
    <view class="search-nodata-wrapper" v-if="searching && hotels.length == 0">
      <tp-nodata-card
        :plain="true"
        title="暂时没有您指定条件的酒店"
        sub-title="请尝试改变关键词重新搜索">
      </tp-nodata-card>
    </view>
    
  </view>
</template>

<script>
  import { mapState  } from 'vuex';
  
  export default {
    data() {
      return {
        keywords: "",
        origin: "def",
        city: "",
        searching: false,
        hotels: [],
      };
    },
    computed: {
      ...mapState({
        historyHotelList: state => state.hotel.hisHotels
      }),
    },
    onLoad(options) {
      this.origin = options.origin || "def"
      this.city = options.city || "中国"
      this.keywords = options.keywords || ""
    },
    methods: {
      search(keywords) {
        this.hotels.splice(0, this.hotels.length)
        if (!keywords) {
          this.searching = false
          return
        }
        this.searching = true
        
        let url = this.$urls.getApi("hotelSearch");
        this.$get(url, {
          data: {keywords: keywords, cityName: this.city}
        })
        .then(res => {
          let hotels = res.module || []
          hotels.map((h) => {
            h.keyLabel = this.$tools.splitKeywords(h.label, keywords, 21)
          })
          this.hotels.push(...hotels)
        })
      },
      clear() {
        this.searching = false
      },
      cancel() {
        this.searching = false
        uni.navigateBack();
      },
      clearHistory() {
        this.$store.dispatch("hotel/clear")
      },
      selectHistory(his) {
        this.selectHotel(his)
      },
      selectHotel(h) {
        let curHotel = {
          hotel: {
            label: h.label,
            value: h.value
          },
          origin: this.origin
        }
        this.$store.dispatch("hotel/add", curHotel)
        .then(res => {
          uni.navigateBack({
            success(res) {
              uni.$emit("handClickHotel", curHotel)
            }
          })
        })
      },
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  
  .full-page {
    background-color: var(--white);
    min-height: 100vh;
  }
  
  .hotel-history-items {
    margin: 0 $gutter;
  }
  
  .hotel-icon-wrapper {
    margin-right: $gutter * 0.5;
  }
  
  .hotel-item-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    
    .hotel-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: nowrap;
      
      .hotel-title-text {
        font-size: $font-size-md;
        color: var(--gray-2);
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: nowrap;
        
        &.key {
          color: var(--brand-2);
        }
      }
    }
  }
  
  .search-nodata-wrapper {
    min-height: calc(100vh - 60px);
  }

</style>
